﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>ThunderScope Testbench</title>
    <link href="assets/app.css" rel="stylesheet" />
    <link href="assets/tailwind.css" rel="stylesheet" />
    <link href="assets/jsonTree/jsonTree.css" rel="stylesheet" />
</head>

<body class="flex bg-zinc-900 w-screen h-screen" x-data>

    <!-- Sequence selection dialog -->
    <div id="sequence-dialog" class="z-1 fixed top-0 left-0 w-screen h-screen items-center justify-center">
        <div class="z-1 flex flex-col w-100 h-60 border border-zinc-600 bg-zinc-900 absolute inset-1/2 -translate-1/2">
            <!-- Title bar -->
            <div class="flex-none flex flex-row items-center gap-2 p-2 pl-2 pr-2 bg-zinc-800">
                <div class="flex-none text-neutral-50 font-normal text-xs trim-box">Sequence selection</div>
            </div>
            <div class="flex-none border-b border-zinc-600"></div>
            <!-- Content -->
            <div class="flex-auto flex flex-col p-2 overflow-y-auto">
                <div class="flex-auto flex flex-col text-neutral-50">
                    <div class="flex-auto text-sm">
                        Select the sequence to load:
                        <div class="flex flex-col pt-3 gap-3">
                            <label class="flex items-center">
                                <input type="radio" name="sequence" value="self-calibration" class="form-radio pb-1 text-blue-600" checked><span class="ml-2">Self calibration</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="sequence" value="bench-calibration" class="form-radio text-blue-600"><span class="ml-2">Bench calibration</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="sequence" value="noise-verification" class="form-radio text-blue-600"><span class="ml-2">Noise verification</span>
                            </label>
                        </div>
                    </div>
                    <div class="flex-none">
                        <button id="sequence-ok-button" type="button"
                            class=" float-right border border-zinc-600 bg-zinc-600 p-3 text-neutral-50 font-normal text-sm w-20 h-11 inset-ring-2 inset-ring-zinc-800 active:inset-ring-zinc-500 hover:inset-ring-zinc-700 trim-box">
                            Ok
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div
            class="z-0 fixed top-0 left-0 w-screen h-screen items-center justify-center backdrop-blur-xs pointer-events-none">
        </div>
    </div>

    <div class="z-0 flex-auto flex flex-col border-zinc-600">

        <header class="flex-none flex border-b border-zinc-600 bg-linear-to-t from-zinc-900 to-zinc-950">

            <div class="flex-auto flex flex-row items-center gap-2 pl-3">
                <div class="flex-none">
                    <svg width="24.225441mm" height="9.6179934mm" viewBox="0 0 24.225441 9.6179934" version="1.1"
                        id="svg1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
                        xmlns:svg="http://www.w3.org/2000/svg">
                        <defs id="defs1">
                            <linearGradient data-v-fde0c5aa="" gradientTransform="rotate(25)"
                                id="3dc3c2f0-2841-43e9-8452-d54c7afa2a9d" x1="0" y1="0" x2="1" y2="0">
                                <stop data-v-fde0c5aa="" offset="0%" stop-color="#3616AC" stop-opacity="1" id="stop2" />
                                <stop data-v-fde0c5aa="" offset="100%" stop-color="#E09BED" stop-opacity="1"
                                    id="stop3" />
                            </linearGradient>
                            <linearGradient xlink:href="#3dc3c2f0-2841-43e9-8452-d54c7afa2a9d" id="linearGradient5"
                                gradientTransform="scale(1.587061,0.63009552)" x1="1369.4443" y1="25293.578"
                                x2="30135.332" y2="25293.578" gradientUnits="userSpaceOnUse" />
                            <linearGradient xlink:href="#3dc3c2f0-2841-43e9-8452-d54c7afa2a9d" id="linearGradient1"
                                gradientUnits="userSpaceOnUse" gradientTransform="scale(1.587061,0.63009552)"
                                x1="1369.4443" y1="25293.578" x2="30135.332" y2="25293.578" />
                        </defs>
                        <g id="layer1" transform="translate(-35.459847,-77.052465)">
                            <g data-v-fde0c5aa="" id="6fe1222b-8cba-4285-88ce-945daef1b10d" stroke="none"
                                fill="url(#3dc3c2f0-2841-43e9-8452-d54c7afa2a9d)"
                                transform="matrix(5.3064039e-4,0,0,5.3064039e-4,34.306558,68.595453)"
                                style="fill:url(#linearGradient5)">
                                <path
                                    d="m 42004.43,25360.21 c 69.71,-293.04 363.81,-474.09 656.85,-404.39 293.05,69.71 474.1,363.81 404.39,656.85 -463.24,1938.02 -1333.76,3604.73 -2456.43,4931.5 -1202.72,1421.35 -2696.03,2455.81 -4291.16,3019.97 -284.78,100.44 -597.06,-48.99 -697.51,-333.77 -100.44,-284.77 48.99,-597.06 333.77,-697.5 1415.46,-500.61 2744.82,-1423.59 3820.47,-2694.77 1018.66,-1203.83 1808.77,-2717.17 2229.62,-4477.89 z m 5307.72,-9409.28 c 301.32,17.73 531.23,276.37 513.5,577.69 -17.72,301.32 -276.37,531.22 -577.69,513.5 -1878.27,-117.01 -3782.84,668.69 -5388.49,2200.57 -1563.22,1491.39 -2841.03,3686.43 -3544.94,6448.43 l -1.98,-0.5 c -739.99,3072.27 -2522.28,5461.83 -4713.88,6886.1 -1388.35,902.26 -2943.49,1419 -4507.15,1479.83 -1573.82,61.23 -3151.25,-338.62 -4572.3,-1270.65 -1966.8,-1289.97 -3626.18,-3596.11 -4539.09,-7105.3 l -0.65,0.18 c -1043.76,-3705.12 -2671.44,-6123.94 -4520.96,-7438.02 -1224.72,-870.16 -2548.59,-1252.62 -3860.18,-1200.64 -1321.55,52.36 -2639.5,543.93 -3840.57,1420.84 -1993.85,1455.72 -3661.55,3965.66 -4506.68,7295.78 -73.26,293.05 -370.23,471.23 -663.27,397.97 -293.05,-73.25 -471.23,-370.22 -397.97,-663.27 910.54,-3587.87 2734.71,-6312.07 4926.05,-7911.98 1377.1,-1005.44 2900.54,-1569.55 4439.65,-1630.53 1549.11,-61.39 3105.35,385.09 4536.28,1401.76 2041.53,1450.52 3823.25,4067.45 4940.32,8032.82 l 2.14,10.7 c 837,3224.89 2328.03,5322.24 4084.01,6473.95 1224.6,803.18 2581.94,1147.83 3934.71,1095.2 1362.9,-53.02 2726.23,-508.51 3950.87,-1304.38 1973.35,-1282.43 3580.09,-3444.02 4249.41,-6230.89 v -8.56 c 756.28,-2967.46 2145.9,-5341.79 3853.05,-6970.48 1827.53,-1743.57 4020.77,-2636.24 6205.81,-2500.12 z M 28268.23,30464.34 c 197.32,228.06 172.42,572.92 -55.63,770.25 -228.05,197.32 -572.92,172.42 -770.24,-55.63 -595.68,-684.96 -1136.83,-1499.02 -1605.01,-2449.73 -439.06,-891.55 -814.9,-1905.64 -1112.26,-3048.75 l -0.62,0.18 c -712.73,-2530.03 -1698.06,-4460.93 -2841.35,-5850.62 -1224.74,-1488.67 -2629.02,-2351.61 -4066.32,-2660.38 -295.4,-62.62 -484.12,-352.89 -421.49,-648.29 62.63,-295.4 352.89,-484.12 648.29,-421.49 1671.86,359.15 3290.42,1344.82 4682.52,3036.93 1236.78,1503.31 2295.74,3567.51 3051.03,6248.58 l 2.13,10.7 c 277.83,1070.51 628.59,2018.25 1038.01,2849.6 426.4,865.87 915.43,1602.88 1450.94,2218.65 z M 10605.91,18661.09 c 212.69,-213.88 558.51,-214.84 772.39,-2.14 213.87,212.69 214.84,558.51 2.14,772.38 -759.72,763.54 -1447.5,1695.56 -2028.75,2779.69 -559.37,1043.34 -1021.36,2230.53 -1355.61,3547.6 -73.25,293.05 -370.22,471.23 -663.27,397.97 -293.05,-73.25 -471.22,-370.22 -397.97,-663.27 355.43,-1400.56 851.12,-2671.23 1454.05,-3795.8 634.24,-1182.96 1385.87,-2201.12 2217.02,-3036.43 z"
                                    id="path3" style="fill:url(#linearGradient1)" />
                            </g>
                        </g>
                    </svg>
                </div>
                <div class="flex-none flex flex-col">
                    <div class="flex-none text-neutral-50 font-normal text-base text-md">Testbench</div>
                    <div class="flex-none text-neutral-300 font-normal text-base text-sm">Calibrate & verify</div>
                </div>
            </div>
            <div class="flex-none flex flex-row items-center gap-2 p-2">
                <button id="sequence-button" type="button" @mouseenter="help('Select the sequence')"
                    @mouseleave="help('')" :disabled="$store.header.status === 'Running'"
                    class="flex-none border border-zinc-600 bg-zinc-600 text-neutral-50 font-normal text-xs w-20 h-11 inset-ring-2 inset-ring-zinc-800 active:inset-ring-zinc-500 hover:inset-ring-zinc-700 trim-box disabled:opacity-50 disabled:cursor-not-allowed">
                    Select sequence
                </button>

                <button id="start-button" type="button" @mouseenter="help('Start the sequence')" @mouseleave="help('')"
                    class="flex-none border border-zinc-600 bg-zinc-600 text-neutral-50 font-normal text-sm w-20 h-11 inset-ring-2 inset-ring-zinc-800 active:inset-ring-zinc-500 hover:inset-ring-zinc-700 trim-box">
                    Start
                </button>

                <button id="stop-button" type="button" @mouseenter="help('Stop the sequence')" @mouseleave="help('')"
                    class="flex-none border border-zinc-600 bg-zinc-600 text-neutral-50 font-normal text-sm w-20 h-11 inset-ring-2 inset-ring-zinc-800 active:inset-ring-zinc-500 hover:inset-ring-zinc-700 trim-box">
                    Stop
                </button>


                <div class="flex-none flex flex-col w-20 h-11 border border-zinc-600"
                    @mouseenter="help('Duration of the sequence when running')" @mouseleave="help('')">
                    <div
                        class="flex-auto flex text-neutral-50 font-normal text-xs trim-box items-center justify-center bg-zinc-600">
                        Duration
                    </div>
                    <div id="headline-duration-value"
                        class="flex-auto flex text-neutral-50 font-normal text-xs trim-box items-center justify-center"
                        x-text="$store.header.duration">-</div>
                </div>

                <div class="flex-none flex flex-col w-20 h-11 border border-zinc-600"
                    @mouseenter="help('Status of the sequence when running')" @mouseleave="help('')">
                    <div
                        class="flex-auto flex text-neutral-50 font-normal text-xs trim-box items-center justify-center bg-zinc-600">
                        Status
                    </div>
                    <div id="headline-state-value"
                        class="flex-auto flex text-neutral-50 font-normal text-xs trim-box items-center justify-center"
                        x-text="$store.header.status">-</div>
                </div>
            </div>



        </header>

        <!-- Main Content -->
        <main class="flex-auto flex min-h-0">
            <!-- Sequence widget -->
            <div class="flex-2 flex flex-col border-r border-zinc-600">
                <!-- Title bar -->
                <div class="flex-none flex flex-row items-center gap-2 p-2 pl-2 pr-2 bg-zinc-800"
                    @mouseenter="help('Sequence display area')" @mouseleave="help('')">
                    <div class="flex-none text-neutral-50 font-normal text-xs trim-box" x-text="$store.sequenceheader">Sequence</div>
                </div>
                <div class="flex-none border-b border-zinc-600"></div>
                <!-- Content -->
                <div class="flex-auto flex flex-col p-2 overflow-y-auto">
                    <div class="flex-auto overflow-y-auto">
                        <table class="w-full text-left text-neutral-50 text-sm font-normal">
                            <thead class="bg-zinc-800">
                                <tr>
                                    <th class="p-1 w-12 font-normal">#</th>
                                    <th class="p-1 font-normal">Step name</th>
                                    <th class="p-1 w-15 font-normal">Skip?</th>
                                    <th class="p-1 w-25 font-normal">Ignore error?</th>
                                    <th class="p-1 w-20 font-normal">Duration</th>
                                    <th class="p-1 w-20 font-normal">Status</th>
                                </tr>
                            </thead>
                            <tbody id="sequence-table-body">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Variables widget -->
            <div class="flex-1 flex flex-col  border-zinc-600">
                <!-- Title bar -->
                <div class="flex-none flex flex-row items-center gap-2 p-2 pl-2 pr-2 bg-zinc-800"
                    @mouseenter="help('Variable display area')" @mouseleave="help('')">
                    <div class="flex-none text-neutral-50 font-normal text-xs trim-box">Variables</div>
                </div>
                <div class="flex-none border-b border-zinc-600"></div>
                <!-- Content -->
                <div class="flex-auto flex overflow-y-auto p-2">
                    <div id="variables-content"
                        class="flex-auto flex flex-row overflow-y-auto text-sm text-neutral-50 overflow-x-auto pl-1">

                    </div>
                </div>
            </div>
        </main>

        <!-- Footer: Log Display -->
        <footer class="flex-none flex flex-col">
            <!-- Log widget -->
            <div class="flex-auto flex flex-col">
                <div class="flex-none border-b border-zinc-600"></div>
                <!-- Title bar -->
                <div class="flex-none flex flex-row items-center gap-2 p-2 pl-2 pr-2 bg-zinc-800"
                    @mouseenter="help('Log display area')" @mouseleave="help('')">
                    <div class="flex-none text-neutral-50 font-normal text-xs trim-box">Log</div>
                </div>
                <div class="flex-none border-b border-zinc-600"></div>
                <!-- Content -->
                <div class="flex-auto flex p-2 h-32 overflow-y-auto text-sm text-neutral-400">
                    <div id="log-content"
                        class="flex-auto flex flex-col gap-1 overflow-y-auto text-sm text-neutral-400">

                    </div>
                </div>
            </div>
            <div
                class="flex-none flex flex-row bg-linear-to-b from-zinc-900 to-zinc-950 font-normal text-sm p-2 border-zinc-600 border-t gap-2">
                <div class="flex-none flex">
                    <div x-text="$store.footer.contextHelp" class="flex-none trim-box text-neutral-50"></div>
                </div>
                <div class="flex-auto"></div>
                <div class="flex-none flex" @mouseenter="help('UI zoom level')" @mouseleave="help('')">
                    <div x-text="$store.footer.zoom" class="flex-none trim-box text-neutral-50">Zoom: 100%</div>
                </div>
            </div>
        </footer>
    </div>

    <script src="assets/app.js"></script>
    <script src="assets/jsonTree/jsonTree.js"></script>
    <script src="assets/alpine.min.js"></script>

</body>

</html>